<template>
    <div>
        <home-header></home-header>
        <home-swiper :list="swiperList"></home-swiper>
        <home-icons :list="iconList"></home-icons>
        <home-recommend :list="recommendList"></home-recommend>
        <home-weekend :list="weekendList"></home-weekend>
    </div>
</template>

<script>
    import HomeHeader from './components/Header'
    import HomeSwiper from './components/swiper'
    import HomeIcons from './components/Icons'
    import HomeRecommend from './components/Recommend'
    import HomeWeekend from './components/Weekend'
    import axios from 'axios'
    import {mapState} from 'vuex'
    export default {
        name:'home',
        components:{
            HomeHeader,
            HomeSwiper,
            HomeIcons,
            HomeRecommend,
            HomeWeekend
        },
        data(){
            return{
                lastCity:'',
                swiperList:[],
                iconList:[],
                recommendList:[],
                weekendList:[]
            }
        },
        computed:{
            ...mapState(['city'])
        },
        methods:{
            getHomeInfo(){
                var _this=this;
                axios.get('/api/index.json?city='+this.city)
                .then(function(res){
                    res=res.data;
                    if(res.ret&&res.data){
                        const data=res.data;
                        _this.swiperList=data.swiperList;
                        _this.iconList=data.iconList;
                        _this.recommendList=data.recommendList;
                        _this.weekendList=data.weekendList;
                    }
                });
            }
        },
        mounted(){
            this.lastCity=this.city;
            this.getHomeInfo();
        },
        activated(){
            if(this.lastCity!==this.city){
                this.lastCity=this.city;
                this.getHomeInfo();
            }
        }
    }
</script>

<style scoped>

</style>